﻿@using System.Web.Script.Serialization
@using yiCommerce.Models.Customers
@{
    ViewBag.Title = "ChooseIneterstedTags";

}
@{
    var model = (CustomerTagModel)ViewBag.Model;
    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
    var totalRows = model.TagsAvailable.TotalCount;
}


<div class="container">





    <div>
        <h4>@T("AvailableTags")</h4>
        <div class="row ">
            <!-- ko foreach: AvailableTags-->
            <div class="col-lg-3  ct_availTagItem">
                <div>
                    
                    <input type="checkbox"  data-bind="value:TagId+'_'+ TagName,checked:  $root.checkedBinding, attr:{name:TagId, id:TagId} " class="ct_chk" />
                    <label  data-bind="text:TagName,attr:{for:TagId}" class="ct_tagItem"  ></label> <span>x</span>
                    <span data-bind="text:CountTaged"></span>
                </div>
                <div class="ct_introStatus">
                        
                     <!-- ko foreach: TagIntroStatuses-->
                        <div class="ct_introitem"><span data-bind="text:Text"></span></div> 
                     <!-- /ko -->
                </div>

            </div>
            <!-- /ko -->
        </div>


        <div class="row">
            <div style="text-align: center" >
                
                
                <ul class="pagination">
                    <!-- ko foreach: ko.utils.range(0,  AvailableTags.pageCount()-1) -->
                    <li>
                        <a data-bind="click:$root.AvailableTags.gotoPage"><span data-bind="text:$data+1"></span></a>
                    </li>
                    <!-- /ko -->
                </ul>
            </div>


        </div>

    </div>

    <div>
        <h4>@T("ChoosedTags")</h4>
        <div>
            <!-- ko foreach: SelectedTags-->  
                <label  data-bind="text:TagName" class="ct_tagItem"  ></label>
            <!-- /ko -->
        </div>

        <div style="clear: both">
            <input type="button" value="save" data-bind="click:SaveCustomerTags"  class="btn btn-primary"/>
             <!-- ko if: IsFromRegist-->  
            lll
            <!-- /ko -->

        </div>
    </div>
</div>


@section scripts
{

    <script src="~/Scripts/common/knockout_paging.js"></script>

    <script>

        var init = @jsonStr;

        function TagIntroStatus(createdAt, customerId, isProductStatus, point, productId, text) {

            var self = this;
            self.CreatedAt = ko.observable(createdAt);
            self.CustomerId= ko.observable(customerId);
            self.IsProductStatus= ko.observable(isProductStatus);
            self.Point= ko.observable(point);
            self.ProductId= ko.observable(productId);
            self.Text= ko.observable(text);
        }

        function TagListItemModel(tagId, tagName, countTaged) {

            var self = this;
            self.TagId = ko.observable(tagId);
            self.TagName = ko.observable(tagName);
            self.CountTaged = ko.observable(countTaged);

        }

        function SaveInterestedTagsRequest() {
            var self = this;
            self.TagIdList = ko.observableArray([]);
        }
        
        function CustomerTagModel() {

            var self = this;

            self.IsFromRegist = ko.observable(init.IsFromRegist);
            
            var tempTags = $.isEmptyObject(init.TagsAvailable) ? [] : init.TagsAvailable;
            //self.AvailableTags= ko.observableArray(tempTags);

            var firstPageModel = {
                rows: tempTags
            };


            self.AvailableTags = ko.pagedList({
                totalRows: @totalRows,
                firstPage: firstPageModel,
                loadPage: function(pageIndex, pageSize) {
                    return $.getJSON("api/CustomerTagApi/FindTags?PageIndex=" + pageIndex + "&PageSize=" + pageSize);
                },
                pageSize: 5,
                map: function(a) {
                    //create a simple view model that wraps each item in the results
                    //return new TagListItemModel(a.TagId, a.TagName, a.CountTaged);
               
                    var statuses = $.isEmptyObject(a.TagIntroStatuses) ? [] : a.TagIntroStatuses;
                    return {
                        TagId: a.TagId,
                        TagName: a.TagName,
                        CountTaged: a.CountTaged,
                        TagIntroStatuses:statuses

                    };
                }
            });

                self.SelectedTags = ko.observableArray([]);

                self.checkedBinding = ko.observableArray([]);
           
            
                self.SelectedTags = ko.computed({

                    read: function () {

                        var newSelectedTags = [];
                        ko.utils.arrayForEach(self.checkedBinding(), function(tagIndex) {
                            var tagArr = tagIndex.split('_');
                            var newTag = new TagListItemModel(tagArr[0], tagArr[1]);
                            newSelectedTags.push(newTag);
                        
                        });

                  
                        return newSelectedTags;
                    },
                
                     
                });


                self.SaveCustomerTags = function() {

                    var request = {
                        TagIdList: self.SelectedTags()
                    };
                
                    $.ajax({
                        url: "/api/CustomerTagApi/SaveInterestedTags",
                        type: 'post',
                        data: ko.toJSON(request),
                        contentType: 'application/json',
                        success: function(result) {

                            if (result.Status == "0") {
                                alert("保存成功");
                            } else {
                                alert("保存失败：" + result.Msg);
                            }
                        }
                    });
                };


            }

            var vm = new CustomerTagModel();
            ko.applyBindings(vm);

    </script>
}